﻿
Ext.define('Ext.ux.UserPanel', {
    extend: 'Ext.Panel',
    requires: [
        'Ext.toolbar.*',
        'Ext.widget.*',
        'Ext.form.*',
        'Ext.window.*'
    ],

    // Component initialization override: adds the top and bottom toolbars and setup headers renderer.
    initComponent: function () {
        var me = this;

        me.tbar = [{
            xtype: 'button',
            text: '注册',
            tooltip: '注册新用户',
            handler: me.onRegisterClick
        }, {
            xtype: 'button',
            text: '登录',
            tooltip: '用户登录',
            handler: me.onLoginClick,
            scope: me
        }, '-', {
            xtype: 'button',
            text: '忘记密码',
            tooltip: '重新获取随机密码',
            handler: me.onForgetPassClick,
            scope: me
        }, '-', {
            xtype: 'button',
            text: '修改密码',
            tooltip: '修改用户密码',
            handler: me.onModifyPassClick,
            scope: me
        }];

        me.callParent(arguments);
    },

    // afterRender override: it adds textfield and statusbar reference and start monitoring keydown events in textfield input 
    afterRender: function () {
        var me = this;
        me.callParent(arguments);
        //me.textField = me.down('textfield[name=searchField]');
        //me.statusBar = me.down('statusbar[name=searchStatusBar]');
    },

    onRegisterClick: function () {
        var me = this,
            registerWindow;

        if (!registerWindow) {
            var fieldName = new Ext.form.field.Text({
                xtype: 'textfield',
                allowBlank: false,
                blankText: '用户名不能为空',
                emptyText: '请输入用户名'
            })
            var registerForm = Ext.widget('form', {
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                border: false,
                bodyPadding: 10,

                fieldDefaults: {
                    labelAlign: 'top',
                    labelWidth: 100,
                    labelStyle: 'font-weight:bold'
                },
                defaults: {
                    margins: '0 0 10 0'
                },

                items: [
                    { xtype: 'fieldcontainer',
                        fieldLabel: '请填写邮箱地址',
                        combineErrors: false,
                        layout: 'hbox',
                        defaults: {
                            hideLabel: true
                        },
                        items: [fieldName, { xtype: 'displayfield',
                            value: '@abc.com'
                        }]
                    }],

                buttons: [{
                    text: '取消',
                    handler: function () {
                        registerForm.getForm().reset();
                        registerWindow.close();
                    }
                }, {
                    text: '提交',
                    handler: function () {
                        if (registerForm.getForm().isValid()) {
                            // In a real application, this would submit the form to the configured url
                            registerForm.getForm().submit({
                                url: '/User/Register',
                                params: { UserName: fieldName.getValue() },
                                waitMsg: '提交中...',
                                success: function (form, action) {
                                    Ext.Msg.alert('提示', '提交成功', function () { me.setTitle('欢迎 ' + action.result.msg); });
                                },
                                failure: function (form, action) {
                                    Ext.Msg.alert('提示', '提交失败', function () { });
                                }
                            });
                            registerForm.getForm().reset();
                            registerWindow.close();
                            //Ext.MessageBox.alert('Thank you!', 'Your inquiry has been sent. We will respond as soon as possible.');
                        }
                    }
                }]
            });

            registerWindow = Ext.widget('window', {
                title: '用户注册',
                closeAction: 'hide',
                width: 400,
                height: 200,
                minHeight: 200,
                layout: 'fit',
                resizable: true,
                modal: true,
                items: registerForm
            });
        }
        registerWindow.show();
    },

    onLoginClick: function () {
        var me = this,
             loginWindow;

        if (!loginWindow) {
            var fieldName = new Ext.form.field.Text({
                xtype: 'textfield',
                allowBlank: false,
                fieldLabel: '用户名',
                blankText: '用户名不能为空',
                emptyText: '请输入用户名'
            })
            var fieldPass = new Ext.form.field.Text({
                xtype: 'textfield',
                inputType: 'password',
                allowBlank: false,
                fieldLabel: '密码',
                blankText: '密码不能为空',
                emptyText: '请输入密码',
                labelAlign: 'left',
                labelWidth: 100,
                labelStyle: 'font-weight:normal',
                margins: '0 0 0 0'
            })
            var loginForm = Ext.widget('form', {
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                border: false,
                bodyPadding: 10,

                fieldDefaults: {
                    labelAlign: 'top',
                    labelWidth: 100,
                    labelStyle: 'font-weight:bold'
                },
                defaults: {
                    margins: '0 0 10 0'
                },

                items: [
                    { xtype: 'fieldcontainer',
                        fieldLabel: '请填写用户名和密码',
                        combineErrors: false,
                        layout: 'hbox',
                        items: [fieldName, { xtype: 'displayfield',
                            value: '@abc.com'
                        }]
                    }, fieldPass],

                buttons: [{
                    text: '取消',
                    handler: function () {
                        loginForm.getForm().reset();
                        loginWindow.close();
                    }
                }, {
                    text: '登录',
                    handler: function () {
                        if (loginForm.getForm().isValid()) {
                            // In a real application, this would submit the form to the configured url
                            loginForm.getForm().submit({
                                url: '/User/Login',
                                params: { UserName: fieldName.getValue(), UserPass: fieldPass.getValue() },
                                waitMsg: '提交中...',
                                success: function (form, action) {
                                    Ext.Msg.alert('提示', '提交成功', function () { });
                                },
                                failure: function (form, action) {
                                    Ext.Msg.alert('提示', '提交失败', function () { });
                                }
                            });
                            loginForm.getForm().reset();
                            loginWindow.close();
                            //Ext.MessageBox.alert('Thank you!', 'Your inquiry has been sent. We will respond as soon as possible.');
                        }
                    }
                }]
            });

            loginWindow = Ext.widget('window', {
                title: '用户登录',
                closeAction: 'hide',
                width: 400,
                height: 250,
                minHeight: 250,
                layout: 'fit',
                resizable: true,
                modal: true,
                items: loginForm
            });
        }
        loginWindow.show();
    },

    onForgetPassClick: function () {
        var me = this,
             passforgetWindow;

        if (!passforgetWindow) {
            var fieldName = new Ext.form.field.Text({
                xtype: 'textfield',
                allowBlank: false,
                fieldLabel: '用户名',
                blankText: '用户名不能为空',
                emptyText: '请输入用户名'
            });

            var passforgetForm = Ext.widget('form', {
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                border: false,
                bodyPadding: 10,

                fieldDefaults: {
                    labelAlign: 'top',
                    labelWidth: 100,
                    labelStyle: 'font-weight:bold'
                },
                defaults: {
                    margins: '0 0 10 0'
                },

                items: [
                    { xtype: 'fieldcontainer',
                        fieldLabel: '请填写用户名',
                        combineErrors: false,
                        layout: 'hbox',
                        items: [fieldName, { xtype: 'displayfield',
                            value: '@abc.com'
                        }]
                    }],

                buttons: [{
                    text: '取消',
                    handler: function () {
                        passforgetForm.getForm().reset();
                        passforgetWindow.close();
                    }
                }, {
                    text: '提交',
                    handler: function () {
                        if (passforgetForm.getForm().isValid()) {
                            // In a real application, this would submit the form to the configured url
                            passforgetForm.getForm().submit({
                                url: '/User/ForgetUserPass',
                                params: { UserName: fieldName.getValue() },
                                waitMsg: '提交中...',
                                success: function (form, action) {
                                    Ext.Msg.alert('提示', '提交成功', function () { });
                                },
                                failure: function (form, action) {
                                    Ext.Msg.alert('提示', '提交失败', function () { });
                                }
                            });
                            passforgetForm.getForm().reset();
                            passforgetWindow.close();
                            //Ext.MessageBox.alert('Thank you!', 'Your inquiry has been sent. We will respond as soon as possible.');
                        }
                    }
                }]
            });

            passforgetWindow = Ext.widget('window', {
                title: '忘记密码',
                closeAction: 'hide',
                width: 400,
                height: 250,
                minHeight: 250,
                layout: 'fit',
                resizable: true,
                modal: true,
                items: passforgetForm
            });
        }
        passforgetWindow.show();
    },

    onModifyPassClick: function () {
        var me = this,
             passmodifyWindow;

        if (!passmodifyWindow) {
            var fieldOldPass = new Ext.form.field.Text({
                xtype: 'textfield',
                inputType: 'password',
                allowBlank: false,
                fieldLabel: '原密码',
                blankText: '密码不能为空',
                emptyText: '请输入密码'
            });
            var fieldNewPass1 = new Ext.form.field.Text({
                xtype: 'textfield',
                name: 'password1',
                inputType: 'password',
                allowBlank: false,
                fieldLabel: '请输入密码',
                blankText: '密码不能为空',
                emptyText: '请输入密码'
            });
            var fieldNewPass2 = new Ext.form.field.Text({
                xtype: 'textfield',
                inputType: 'password',
                allowBlank: false,
                fieldLabel: '确认密码',
                blankText: '密码不能为空',
                emptyText: '请输入密码',
                validator: function (value) {
                    var password1 = this.previousSibling('[name=password1]');
                    return (value === password1.getValue()) ? true : '密码不一致'
                }
            });
            var passmodifyForm = Ext.widget('form', {
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                border: false,
                bodyPadding: 10,

                fieldDefaults: {
                    labelAlign: 'top',
                    labelWidth: 100,
                    labelStyle: 'font-weight:bold'
                },
                defaults: {
                    margins: '0 0 10 0'
                },

                items: [
                    { xtype: 'fieldcontainer',
                        fieldLabel: '请填写原密码，并输入新密码',
                        combineErrors: false,
                        items: [fieldOldPass, fieldNewPass1, fieldNewPass2]
                    }],

                buttons: [{
                    text: '取消',
                    handler: function () {
                        passmodifyForm.getForm().reset();
                        passmodifyWindow.close();
                    }
                }, {
                    text: '提交',
                    handler: function () {
                        if (passmodifyForm.getForm().isValid()) {
                            // In a real application, this would submit the form to the configured url
                            passmodifyForm.getForm().submit({
                                url: '/User/ModifyUserPass',
                                params: { OldPass: fieldOldPass.getValue(), NewPass: fieldNewPass1.getValue() },
                                waitMsg: '提交中...',
                                success: function (form, action) {
                                    Ext.Msg.alert('提示', '提交成功', function () { });
                                },
                                failure: function (form, action) {
                                    Ext.Msg.alert('提示', '提交失败', function () { });
                                }
                            });
                            passmodifyForm.getForm().reset();
                            passmodifyWindow.close();
                            //Ext.MessageBox.alert('Thank you!', 'Your inquiry has been sent. We will respond as soon as possible.');
                        }
                    }
                }]
            });

            passmodifyWindow = Ext.widget('window', {
                title: '修改密码',
                closeAction: 'hide',
                width: 400,
                height: 250,
                minHeight: 250,
                layout: 'fit',
                resizable: true,
                modal: true,
                items: passmodifyForm
            });
        }
        passmodifyWindow.show();
    }
});